<template>
	<div>

		<el-form class="form" ref="form" :model="form" :rules="rules" label-width="80px">
			<el-row class="row">
				<!-- el-col 62  -->
				<el-col :span="24" class="clclclcl">
					<el-form-item label="膳食名称" prop="foodName" class="foodName" >
						<el-input v-model="form.foodName"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="row">
				<el-col :span="10">
					<el-form-item label="膳食类别" prop="foodType">
						<el-input v-model="form.foodType"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="膳食标签" prop="foodLabel">
						<el-input v-model="form.foodLabel"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="row">
				<el-col :span="10">
					<el-form-item label="膳食价格" prop="foodPrice">
						<el-input v-model="form.foodPrice"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="是否清真" prop="isMuslim">
						<el-input v-model="form.isMuslim"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="row">
				<el-col :span="10">
					<el-form-item label="供应星期" prop="supplyDate">
						<el-input v-model="form.supplyDate"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="供应类型" prop="supplyType">
						<el-input v-model="form.supplyType"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row class="row">
				<el-col :span="20">
					<el-form-item label="图片地址">
						<el-input v-model="form.foodpic"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row></el-row>


			<el-row class="row">
				<el-col>
					<el-form-item>
						<el-button type="primary" plain @click="save">保存数据</el-button>
					</el-form-item>
				</el-col>

			</el-row>

		</el-form>
	</div>
</template>

<script>
	import axios from '@/utils/axiosutils.js';
	export default {
		name: 'calendarAdd',
		props: ['editid'],
		components: {},
		data() {
			return {
				form: {
					foodName: '',
					foodType: '',
					foodLabel: '',
					foodPrice: '',
					isMuslim: '',
					supplyDate: '',
					supplyType: '',
					foodpic: ''
				},
				rules: {
					foodName: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					foodType: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					foodLabel: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					foodPrice: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					isMuslim: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					supplyDate: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					supplyType: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
				},
				isupdate: false,
			};
		},
		created() {
			if (this.editid) {
				// 如果是修改 用户名输入框禁用
				this.isupdate = true;
				axios.get(
					'/food/getById',
					response => {
						this.form.id = this.editid;
						this.form.foodName = response.obj.foodName;
						this.form.foodType = response.obj.foodType;
						this.form.foodLabel = response.obj.foodLabel;
						this.form.foodPrice = response.obj.foodPrice;
						this.form.isMuslim = response.obj.isMuslim;
						this.form.supplyDate = response.obj.supplyDate;
						this.form.supplyType = response.obj.supplyType;
						this.form.foodpic = response.obj.foodpic;
					}, {
						id: this.editid
					}
				);
			}
		},
		methods: {
			save: function() {
				axios.post(
					'/food/add',
					resp => {
						this.$emit('update:show', false);
						this.$emit('getData');
					},
					this.form
				);
			}
		}
	};
</script>

<style scoped>
	.row {
		/* border: solid 1px #2C3E50; */
		height: 62px !important;
	}
	
	.form{
		/* background-color: #669933; */
	}
</style>
